<!-- 「明细」页面 -->
<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar class="nav-bar" title="明细" statusBar="true" leftIcon="left" @clickLeft="back" :border="false"
      backgroundColor="#00000000"></uni-nav-bar>
    <BillList :billList="billList" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import BillList from '@/components/bill-list.vue';
import { back } from '@/utils/navigate';
import { takeOutList } from '@/api/api-user'
import { showToast } from '@/utils/tools';

/** 明细列表 */
let billList: BillListItem[] = reactive<BillListItem[]>([]);

onMounted(() => {
  getList()
})

/** 获取明细列表 */
const getList = async () => {
  const res: any = await takeOutList();
  console.log('明细列表', res);
  const target = res.data.data;
  billList.splice(0);
  if (target) {
    target.forEach((item: any, index: number) => {
      const { wx_headimg: avatar, redsum: amount, finish_time: time } = item;
      const newItem = {
        id: String(index + 1),
        avatar,
        amount,
        time,
        title: '提现'
      }
      billList.push(newItem)
    })
  } else {
    showToast('获取失败，请稍后重试')
  }
}

</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 15px;
}
</style>
